---
title: InlineLink
description: A versatile inline link component with customizable styling, icon support, and target options for creating consistent link experiences throughout your application.
---
import { InlineLinkBasic, InlineLinkWithIcon, InlineLinkWithTarget, InlineLinkWithCustomClass } from "./inline-link.example";

## Overview

The InlineLink component provides a consistent way to create inline links within text content. It supports icons, custom styling, and target attributes. The component extends all standard HTML anchor element attributes for maximum flexibility.

## Usage

```tsx
import { InlineLink } from "@unkey/ui";

export default function MyComponent() {
  return (
    <div>
      <InlineLink href="/docs">Documentation</InlineLink>
      <InlineLink href="https://example.com" target="_blank">
        External Link
      </InlineLink>
      <InlineLink href="/help" icon={<HelpIcon />}>
        Help Center
      </InlineLink>
    </div>
  );
}
```

## Examples

### Basic Usage

Simple inline links with different styling options.

<InlineLinkBasic />

### With Icons

Inline links with icon support for enhanced visual meaning.

<InlineLinkWithIcon />

### With Target Options

Links with different target configurations for external and internal navigation.

<InlineLinkWithTarget />

### Custom Styling

Inline links with custom styling classes for specific design requirements.

<InlineLinkWithCustomClass />

## Features

- **Consistent Styling**: Uniform link appearance across your application with customizable themes
- **Icon Support**: Optional icon integration with configurable positioning (left or right)
- **Flexible Styling**: Extensive customization options through className prop and CSS variables
- **Accessibility**: Built-in accessibility support with proper ARIA attributes and keyboard navigation
- **Target Options**: Support for internal and external links with appropriate security attributes
- **Responsive Design**: Adapts seamlessly to different screen sizes and device types
- **Dark Mode Support**: Consistent appearance in both light and dark themes

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| href | string | required | The URL the link points to |
| label | string | undefined | The text content of the link (optional) |
| icon | React.ReactNode | undefined | Optional icon to display with the link |
| iconPosition | "left" \| "right" | "right" | Position of the icon relative to the label |
| className | string | undefined | Additional CSS classes |
| ...props | React.AnchorHTMLAttributes&lt;HTMLAnchorElement&gt; | - | All standard HTML anchor element attributes |

## Accessibility

The InlineLink component is built with accessibility in mind:

- **Semantic HTML**: Uses proper `<a>` elements with appropriate href attributes
- **ARIA Attributes**: Includes proper ARIA labels and roles for screen readers
- **Keyboard Navigation**: Full keyboard support with logical tab order and focus management
- **High Contrast**: Maintains proper contrast ratios for text readability
- **Focus Indicators**: Clear visual focus states for keyboard navigation
- **Screen Reader Support**: Announces link purpose and destination appropriately
- **Security Attributes**: Automatically adds `rel="noopener noreferrer"` for external links
- **Descriptive Text**: Encourages meaningful link text that describes the destination
